<template>
    <div class="user-center">
      <NavBar>
        <template #default> 我的 </template>
      </NavBar>

      <router-link to="/login" class="link">
        <div class="user-info">
          <div class="avatar">
            <img
              v-if="userStore.userInfo.avatar"
              :src="userStore.userInfo.avatar"
              alt="用户头像"
            />
            <el-icon v-else>
              <User />
            </el-icon>
          </div>
          <div
            v-if="userStore.userInfo && userStore.userInfo.userName"
            class="login-text"
          >
            <span>{{ userStore.userInfo.userName }}</span>
          </div>
          <div v-else class="login-text">
            <span>点击登录</span>
          </div>
          <div class="arrow">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </router-link>

      <div class="order-section">
        <div class="section-header">
          <h3>我的订单</h3>
          <div class="view-all" @click="viewAllOrders">
            <span>全部</span>
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
        <div class="order-types">
          <div class="order-item">
            <el-icon>
              <Money />
            </el-icon>
            <span>待付款</span>
          </div>
          <div class="order-item">
            <el-icon>
              <Box />
            </el-icon>
            <span>待发货</span>
          </div>
          <div class="order-item">
            <el-icon>
              <Van />
            </el-icon>
            <span>待收货</span>
          </div>
          <div class="order-item">
            <el-icon>
              <ChatLineRound />
            </el-icon>
            <span>待评价</span>
          </div>
          <div class="order-item">
            <el-icon>
              <Service />
            </el-icon>
            <span>退款/售后</span>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="setting-item" @click="goToAddress">
          <div class="item-left">
            <el-icon>
              <Location />
            </el-icon>
            <span>收货地址</span>
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <router-link to="/customerService" class="setting-item">
          <div class="item-left">
            <el-icon>
              <Headset />
            </el-icon>
            <span>客服反馈</span>
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </router-link>
        <div class="setting-item" @click="goToSettings">
          <div class="item-left">
            <el-icon>
              <Setting />
            </el-icon>
            <span>通用设置</span>
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <div class="setting-item" @click="goToAccountSecurity">
          <div class="item-left">
            <el-icon>
              <User />
            </el-icon>
            <span>账号与安全</span>
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <div class="setting-item" @click="goToAbout">
          <div class="item-left">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>关于</span>
          </div>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
      </div>

      <div class="logout-btn" @click="handleLogout">退出登录</div>
    </div>
  </template>

  <script setup>
  import NavBar from "../../components/common/NavBar.vue";
  import {
    ArrowRight,
    Money,
    Box,
    Van,
    Headset,
    ChatLineRound,
    Service,
    Location,
    Setting,
    InfoFilled,
    User,
  } from "@element-plus/icons-vue";
  import { onMounted } from "vue";
  import { ElMessageBox, ElMessage } from "element-plus"; // Import ElMessageBox and ElMessage
  import { useUserStore } from "@/stores/user"; // Import the Pinia user store
  // import { useRouter } from "vue-router"; // Import useRouter for programmatic navigation
  const userStore = useUserStore();
  // const router = useRouter(); // Get router instance
  onMounted(() => {});

  const handleLogout = () => {
    ElMessageBox.confirm("确定要退出登录吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        userStore.logout();
        ElMessage.success("账号已退出");
        location.reload();
        // Or, if you prefer programmatic navigation without full reload:
        // router.push('/login');
      })
      .catch(() => {
        ElMessage.info("已取消退出");
      });
  };

  const viewAllOrders = () => {
    ElMessage.info("跳转到全部订单页面");
    // router.push('/orders/all');
  };
  const goToAddress = () => {
    ElMessage.info("跳转到收货地址管理");
    // router.push('/address');
  };
  const goToSettings = () => {
    ElMessage.info("跳转到通用设置");
    // router.push('/settings');
  };
  const goToAccountSecurity = () => {
    ElMessage.info("跳转到账号与安全设置");
    // router.push('/account-security');
  };
  const goToAbout = () => {
    ElMessage.info("跳转到关于页面");
    // router.push('/about');
  };
  </script>



  <style scoped>
  .user-center {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 60px;
  }

  /* 用户信息栏 */
  .link {
    text-decoration: none;
  }

  .user-info {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .avatar {
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 1px solid #ccc;
    height: 60px;
    width: 60px;
    display: flex; /* Added to center icon/image */
    justify-content: center; /* Added to center icon/image */
    align-items: center; /* Added to center icon/image */
  }

  .avatar .el-icon {
    font-size: 60px;
    color: #666;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the avatar area */
  }

  .login-text {
    flex: 1;
    font-size: 16px;
    color: #333;
  }

  .arrow {
    color: #999;
  }

  /* 我的订单 */
  .order-section {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px; /* Added border-radius for aesthetics */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Added subtle shadow */
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .section-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
  }

  .view-all {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
    cursor: pointer; /* Indicate clickable */
  }

  .view-all span {
    margin-right: 5px;
  }

  .order-types {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }

  .order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* Make items take equal space */
    padding: 5px 0; /* Add some padding */
    cursor: pointer; /* Indicate clickable */
  }

  .order-item .el-icon {
    font-size: 24px;
    margin-bottom: 5px;
    color: #ff5000;
  }

  .order-item span {
    font-size: 12px;
    color: #666;
  }

  /* 设置项 */
  .settings-section {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 8px; /* Added border-radius for aesthetics */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Added subtle shadow */
  }

  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer; /* Indicate clickable */
    text-decoration: none; /* For router-link to remove underline */
    color: inherit; /* For router-link to inherit text color */
  }

  .item-left {
    display: flex;
    align-items: center;
  }

  .item-left .el-icon {
    margin-right: 10px;
    color: #ff5000;
  }

  .setting-item:last-child {
    border-bottom: none;
  }

  /* 退出登录 */
  .logout-btn {
    margin: 20px 15px;
    padding: 12px 0;
    background-color: #ff5000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer; /* Indicate clickable */
    transition: background-color 0.3s ease; /* Smooth hover effect */
  }

  .logout-btn:hover {
    background-color: #e64a00; /* Darker red on hover */
  }
  </style>